<template>
    <div class="box" v-if="opens" @touchmove.prevent>
        <div class="center">
            <div class="colse">
                <img class="colse_img" @click="close" src="../../assets/bbcz/imgclose01.png" alt="">
            </div>
            <div class="imgShow">
                <img class="imgShow_img" :src="imgList[index].img" alt="">
                <div class="imgShow_bottom">
                    <div class="imgShow_bottom_name">{{item.vehicleBrandModel?(item.vehicleBrandModel.split('|')[0]||'') + ' ' +(item.vehicleBrandModel.split('|')[1]||''):''}}  </div>
                    <div>图片{{index+ 1 +'/'+imgList.length}}</div>
                </div>
                <div class="left" @click="leftClick">
                    <img class="img" src="../../assets/bbcz/xqyjt01.png" alt="">
                </div>
                <div class="right" @click="rightClick">
                    <img class="img" src="../../assets/bbcz/xqzjt01.png" alt="">
                </div>
            </div>
            <div class="tab">
                <div :class="tabIndex==1?'active':'tab_item'" @click="tabClick(1)">全部</div>
                <div :class="tabIndex==2?'active':'tab_item'" @click="tabClick(2)">车身外观</div>
                <div :class="tabIndex==3?'active':'tab_item'" @click="tabClick(3)">仪表中控</div>
                <div :class="tabIndex==4?'active':'tab_item'" @click="tabClick(4)">车厢座椅</div>
            </div>
            <div class="completeImg">
                <div class="completeImg_item" ref="scrolls">
                    <div class="completeImg_img" v-for="(i ,j) in imgList" @click="preView(j)" :key="i.id">
                        <img :src="i.img" alt="" :class="index==j?'transf':''">
                    </div>
                </div>
                <div class="left" @click="scrollsLeft()">
                    <img src="../../assets/bbcz/tpxqz01.png" alt="">
                </div>
                <div class="right" @click="scrollsRight()">
                    <img src="../../assets/bbcz/tpxqy01.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        vid:{
            type:String
        },
        item:{
             type:Object
        }
    },
    data() {
        return {
            opens:false,
            imgList:[
                {
                    id:1,
                    img:'https://pic.bangbangtongcheng.com/3d4e2cfc0a0f46faa53a46a0836293cf',
                    name:'第一张车'
                },
                {
                    id:2,
                    img:'https://pic.bangbangtongcheng.com/3d4e2cfc0a0f46faa53a46a0836293cf',
                    name:'第二张车'
                },
                {
                    id:3,
                    img:'https://pic.bangbangtongcheng.com/3d4e2cfc0a0f46faa53a46a0836293cf',
                    name:'第三张车'
                },{
                    id:4,
                    img:'https://pic.bangbangtongcheng.com/3d4e2cfc0a0f46faa53a46a0836293cf',
                    name:'第四张车'
                },{
                    id:5,
                    img:'https://pic.bangbangtongcheng.com/3d4e2cfc0a0f46faa53a46a0836293cf',
                    name:'第五张车'
                },
            ],
            index:0,
            tabIndex:1
        };
    },
    created() {
        this.init()
    },
    methods: {
        preView(i){
            this.index=i
            // this.$hevueImgPreview({
            //     multiple: true,
            //     nowImgIndex: i,
            //     imgList: this.imgList.map((item)=>item.img),
            // });
        },
        init(){
            if(this.vid!=''){
                this.$getHttp('api/mobile/vehicleOwner/queryVehiclePicturesByPictureType',{vehicleId:+this.vid}).then(data =>{
                    // 2：车身外观；3：仪表中控；4：车厢座椅
                    // bodyAppearance//车身外观
                    // instrumentCentralControl//仪表中控
                    // carSeat//车厢座椅
                    var obj = data.vehicleInPicture[0]
                    this.imgList = []
                    this.manageImg(obj.bodyAppearance).map(item=>{
                        this.imgList.push({
                            type:2,
                            img:item,
                        })
                    })
                    this.manageImg(obj.instrumentCentralControl).map(item=>{
                        this.imgList.push({
                            type:3,
                            img:item,
                        })
                    })
                    this.manageImg(obj.carSeat).map(item=>{
                        this.imgList.push({
                            type:4,
                            img:item,
                        })
                    })
                    // this.manageImg(obj.vehicleCoverPicture).map(item=>{
                    //     this.imgList.push({
                    //         type:1,
                    //         img:item,
                    //     })
                    // })
                    this.tempList=this.imgList
                })
            }
            
        },
        //处理图片
    manageImg(imgs) {
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
    },
        //停止页面滚动
		stopMove(){
			let m = function(e){e.preventDefault();};
			document.body.style.overflow='hidden';
			document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
		},
		//开启页面滚动
		Move(){
			let m =function(e){e.preventDefault();};
			document.body.style.overflow='';//出现滚动条
			document.removeEventListener("touchmove",m,{ passive:true });
		},
        open(){
            this.opens=true
            this.stopMove()
        },
        close(){
            this.opens=false
            this.Move()
        },
        leftClick(){
            this.index --
            if (this.index<0) {
                this.index=this.imgList.length-1
            }
        },
        rightClick(){
            this.index ++
            if (this.index>this.imgList.length-1) {
                this.index=0
            }
        },
        tabClick(index){
            if(this.tabIndex==index||index==1){
                this.tabIndex=1
                this.imgList = this.tempList
            }else{
                this.tabIndex=index
                this.imgList = this.tempList.filter(item=>item.type==index)
            }
            
            this.index=0
           
        },
        scrollsLeft(){
            this.$refs.scrolls.scrollLeft = this.$refs.scrolls.scrollLeft - 200
        },
        scrollsRight(){
            this.$refs.scrolls.scrollLeft = this.$refs.scrolls.scrollLeft + 200
        },
    },
};
</script>
<style lang="less" scoped>
.transf{
    transform: scale(1.2);
}
.box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.79);
}
.center{
    margin: 0 auto;
    margin-top: 20px;
    width: 1120px;
    .colse{
        position: relative;
        width: 100%;
        height: 50px;
        .colse_img{
            width: 50px;
            height: 50px;
            position: absolute;
            right: -25px;
            top: -18px;
            cursor: pointer;
        }
    }
    .imgShow{
        width: 1120px;
        height: 555px;
        position: relative;
        .imgShow_img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .imgShow_bottom{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 1121px;
            height: 45px;
            background: rgba(0,0,0,0.62);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            box-sizing:border-box ;
        }
        .left{
            width: 50px;
            height: 50px;
            background: rgba(0,0,0,0.69);
            border-radius: 50px;
            position: absolute;
            top:50%;
            left: 30px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .img{
                width: 30px;
                height: 35px;
            }
        }
        .right{
            width: 50px;
            height: 50px;
            background: rgba(0,0,0,0.69);
            border-radius: 50px;
            position: absolute;
            top:50%;
            right: 30px;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .img{
                width: 30px;
                height: 35px;
            }
        }
    }
    .tab{
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .tab_item{
            font-size: 26px;
            font-weight: 600;
            color: #FFFFFF;
            cursor: pointer;
        }
         .active{
            font-size: 26px;
            font-weight: 600;
            color: #64B6A8;
            cursor: pointer;
        }
    }
    .completeImg{
        width: 100%;
        height: 170px;
        padding: 0 38px;
        box-sizing: border-box;
        position: relative;
        .left{
            width: 38px;
            height: 170px;
            background-color: #FFFFFF;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            img{
                width: 30px;
                height: 35px;
            }
        }
        .right{
            width: 38px;
            height: 170px;
            background-color: #FFFFFF;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            img{
                width: 30px;
                height: 35px;
            }
        }
        .completeImg_item{
            overflow:auto;
            display: flex;
            flex-wrap: nowrap;
            scroll-behavior: smooth;
             .completeImg_img{
                width: 277px;
                height: 170px;
                margin-right: 42px;
                flex-shrink: 0;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: all 0.4s;
                }
            }
        }
        ::-webkit-scrollbar{
            display: none;
        }
    }
}
</style>